<template>
  <div class="home">
    <el-container class="containerClass">
      <el-header  style="position:fixed ;top: 0px;left: 0px;width:100%;z-index: 1;display: flex">
        <div>
          <el-radio-group v-model="isCollapse" style="margin-bottom: 5px;" >
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
<!--          <el-button @click="goPage('https://chat.forchange.cn?chatId=a8e6d87e-098a-4cfb-aa24-fe3c8ce4d0f3/')" >前往ChatGpt</el-button>-->
        </div>

<!--        <div>-->
<!--          <img src="https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/10afbaa9af98434c972137cebc9bffa7.png" style="width: 40%">    -->
<!--        </div>-->
    <div>
       <img src="..\public\static\img\logo.png" style="width: 40%">
    </div>
        <div style="display: flex;align-items: center">

        </div>

      </el-header>
      <el-container  style="margin-top: 50px" >
         <el-aside width="220px"  style="position: fixed; height: 100%" >
          <el-menu router default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse" >


            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-shopping-bag-2" style="margin-left: -5px"></i>
                <span class="spanClass" style="margin-left: -1px" >必备基本用品</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/commodityList">
                  <div class="itemClass">
                    <div class="el-icon-notebook-2"></div>
                    <div class="spanChildren">用品列表</div>
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-shopping-bag-2" style="margin-left: -5px"></i>
                <span class="spanClass" style="margin-left: -1px" >养兔技巧</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/raisingSkillsDO/query">
                  <div class="itemClass">
                    <div class="el-icon-thumb"></div>
                    <div class="spanChildren">技巧</div>
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-shopping-bag-2" style="margin-left: -5px"></i>
                <span class="spanClass" style="margin-left: 0px">侏儒兔的一生</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/lifeCourseDO/query">
                  <div class="itemClass">
                    <div class="el-icon-thumb"></div>
                    <div class="spanChildren">兔子的幼期</div>
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

<!--            <el-submenu index="4">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-shopping-bag-2" style="margin-left: -5px"></i>-->
<!--                <span class="spanClass" style="margin-left: 0px">兔子精选</span>-->
<!--              </template>-->
<!--              <el-menu-item-group>-->
<!--                <el-menu-item index="/commodity/rabbit">-->
<!--                  <div class="itemClass">-->
<!--                    <div class="el-icon-thumb"></div>-->
<!--                    <div class="spanChildren">宠物兔</div>-->
<!--                  </div>-->
<!--                </el-menu-item>-->
<!--              </el-menu-item-group>-->
<!--            </el-submenu>-->

            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-phone" style="margin-left: -4px"></i>
                <span class="spanClass" style="margin-left: -1px">兔子急救攻略</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/strategy">
                  <div class="itemClass">
                    <div class="el-icon-edit-outline"></div>
                    <div class="spanChildren">急救攻略列表</div>
                  </div>
                </el-menu-item>
                <el-menu-item index="/drugDisplay">
                  <div class="itemClass">
                    <div class="el-icon-tickets"></div>
                    <div class="spanChildren">药物展示</div>
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>

<!--            <el-submenu index="6">-->
<!--              <template slot="title">-->
<!--                <i class="el-icon-shopping-bag-2" style="margin-left: -5px"></i>-->
<!--                <span class="spanClass" style="margin-left: -1px" >我的养兔日常记录</span>-->
<!--              </template>-->
<!--              <el-menu-item-group>-->
<!--                <el-menu-item index="/login">-->
<!--                  <div class="itemClass">-->
<!--                    <div class="el-icon-thumb"></div>-->
<!--                    <div class="spanChildren">养兔日常</div>-->
<!--                  </div>-->
<!--                </el-menu-item>-->
<!--              </el-menu-item-group>-->
<!--            </el-submenu>-->

          </el-menu>
        </el-aside>
        <el-main >
          <!--增加跳转路由-->
          <router-view></router-view>
        </el-main>
        <el-footer>
          <h4 style="color: #999999;margin-top: 36px;margin-left: 230px;font-size: 18px;">一旦选择，一生负责。</h4>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  data(){
    return{
      userInfo:{
        userName:'',
        pic:''

      }
      ,isCollapse: true
    }
  },
  methods:{
    goPage (url) { window.location.href = url }
    ,
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  created() {
    let user =  JSON.parse(sessionStorage.getItem('user'))
    if(user != null){
      this.userInfo = user
    }
  }
  }

}
</script>
<!--表示此页面下的内容不会影响别的页面样式-->
<style scoped>
.el-header{
  background-color: #3d8d87;
  color: #333;
  line-height: 60px;
  /* 开启弹性布局 */
  display: flex;
  /*元素水平排列*/
  flex-direction: row;
  /* 元素平分  */
  justify-content: space-between;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  margin-left: 0px;
  line-height: 200px;
}
.el-image{
  color:#3d8d87;
}
.el-main {
  background-color: white;
  color: #333;
}
.home{
  height:100%;
}
.containerClass{
  height: 100%;
}
.imageClass{
  width:210px;
}
.avatarClass{
  margin-top: 5px;
}
.el-menu-vertical-demo{
   height: 100%;
}
.spanClass{
  font-size: 17px;
  margin-left: 10px;
}
.spanChildren{
  margin-left: 10px;
}
.itemClass{
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>
